<template>
	<view class="container">
		<block v-if="isload">

			<dd-tab :itemdata="['未使用', '已使用', '已过期']" :itemst="['0', '1', '2']" :st="st" :isfixed="false"
				@changetab="changetab" v-if="false"></dd-tab>


			<view class="coupon-list">
				<view class="card" :style="{ background: t('color2') }" v-for="(item, index) in datalist" :key="index"
					@tap.stop="goto" :data-url="'coupondetail?rid=' + item.id">
					<view class="radiobox" @tap.stop="changeradio" :data-index="index" v-if="st == 0">
						<view class="radio" :style="item.checked ? 'background:' + t('color1') + ';border:0' : ''"
							v-if="!item.from_mid && (item.isgive == 1 || item.isgive == 2)">
							<image class="radio-img" src="/static/img/checkd.png" />
						</view>
					</view>
					<view class="card-left">

						<view class="pt_left">
							<view class="pt_left-content">
								<view class="f1" :style="{ color: t('color1') }" v-if="item.type == 1"><text
										class="t0">￥</text><text class="t1">{{ item.money }}</text></view>
								<view class="f1" :style="{ color: t('color1') }" v-if="item.type == 30"><text
										class="t0">￥</text><text class="t1">{{ item.money }}</text></view>
								<view class="f1" :style="{ color: t('color1') }" v-if="item.type == 10"><text
										class="t1">{{ item.discount / 10 }}</text><text class="t0">折</text></view>
								<view class="f1" :style="{ color: t('color1') }" v-if="item.type == 2">礼品券</view>
								<view class="f1" :style="{ color: t('color1') }" v-if="item.type == 3"><text
										class="t1">{{ item.limit_count }}</text><text class="t2">次</text></view>
								<view class="f1" :style="{ color: t('color1') }" v-if="item.type == 4">抵运费</view>
								<view class="f1" :style="{ color: t('color1') }" v-if="item.type == 5"><text
										class="t0">￥</text><text class="t1">{{ item.money }}</text></view>
								<!-- <view class="f2"
									v-if="item.type == 1 || item.type == 4 || item.type == 5 || item.type == 30">
									<text v-if="item.minprice > 0">满{{ item.minprice }}元可用</text>
									<text v-else>无门槛</text>
								</view> -->
								<view class="f1" v-if="item.type == 40">电影通用兑换券</view>
								<view class="f1" :style="{ color: t('color1') }" v-if="item.type == 20">券包</view>
							</view>
						</view>
					</view>
					<view class="card-item">
						<view class="card-right">
							<view class="card-time fw-700">
								{{ item.couponname }}
							</view>
							<view class="card-time">
								<text class="t2" v-if="item.type == 1">商品券</text>
								<text class="t2" v-if="item.type == 30">当面付抵扣券</text>
								<text class="t2" v-if="item.type == 2">礼品券</text>
								<text class="t2" v-if="item.type == 3">计次券</text>
								<text class="t2" v-if="item.type == 4">运费抵扣券</text>
								<text class="t2" v-if="item.type == 20">券包</text>
								<text class="t2" v-if="item.type == 40">电影通用兑换券</text>
								<!-- <view class="">
									<text class="t2"
										v-if="!item.from_mid && (item.isgive == 1 || item.isgive == 2)">可赠送</text>
								</view> -->

								<view class="t4" v-if="item.bid > 0">适用商家：{{ item.bname }}</view>
							</view>
							<view class="card-time">有效期至 {{ item.endtime }}</view>
						</view>
					</view>
					<block v-if="item.type == 40">

						<view class="radiobox" @tap.stop="checkboxChange(item, index)" :data-index="index">
							<view class="radio" :style="item.checked ? 'background:' + t('color1') + ';border:0' : ''"
								v-if="item.type == 40">
								<image class="radio-img" src="/static/img/checkd.png" />
							</view>
						</view>

					</block>
					<view class="giveopbox" v-if="show">
						<view class="btn-give" @tap.stop="toBack"
							:style="{ background: 'linear-gradient(90deg,' + t('color1') + ' 0%,rgba(' + t('color1rgb') + ',0.8) 100%)' }">
							确定</view>
					</view>
				</view>

			</view>
			<nomore v-if="nomore"></nomore>
			<nodata v-if="nodata"></nodata>

		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
var app = getApp();

export default {
	data() {
		return {
			opt: {},
			loading: false,
			isload: false,
			menuindex: -1,
			pre_url: app.globalData.pre_url, static_url: app.globalData.static_url,

			st: 0,
			datalist: [],
			pagenum: 1,
			nomore: false,
			nodata: false,
			givecheckbox: false,
			checkednum: 0,
			test: '',
			shareTitle: '',
			sharePic: '',
			shareDesc: '',
			shareLink: '',
			isChecked: false,
			show: false,
			selectedId: null,
			selectedName: '',
			movieTicketCount: '',
			selectedCount: null
		};
	},

	onLoad: function (opt) {
		this.opt = app.getopts(opt);
		this.st = this.opt.st || 0;
		if (opt.selectedId) {
			this.selectedId = opt.selectedId.split(',').map(item => Number(item));
		} else {
			this.selectedId = [];
		}
		console.log(this.selectedId)
		this.getdata();
	},
	onPullDownRefresh: function () {
		this.getdata();
	},
	onReachBottom: function () {
		if (!this.nodata && !this.nomore) {
			this.pagenum = this.pagenum + 1;
			this.getdata(true);
		}
	},
	onShareAppMessage: function () {
		console.log('this.shareLink');
		console.log(this.shareLink);
		return this._sharewx({
			title: this.shareTitle,
			pic: this.sharePic,
			desc: this.shareDesc,
			link: this.shareLink
		});
	},
	onShareTimeline: function () {
		var sharewxdata = this._sharewx({
			title: this.shareTitle,
			pic: this.sharePic,
			desc: this.shareDesc,
			link: this.shareLink
		});
		var query = (sharewxdata.path).split('?')[1] + '&seetype=circle';
		console.log(sharewxdata)
		console.log(query)
		return {
			title: sharewxdata.title,
			imageUrl: sharewxdata.imageUrl,
			query: query
		}
	},
	methods: {
		checkboxChange(item, index) {
			var that = this;
			var datalist = that.datalist;
			var checked = datalist[index].checked;
			var maxSelection = that.opt.num;

			// Initialize selectedId as an empty array if it's null or undefined
			if (!Array.isArray(that.selectedId)) {
				that.selectedId = [];
			}

			// 统计当前已选中的优惠券数量
			var selectedCount = that.selectedCount;

			// 如果当前点击的复选框已选中，则取消选中
			if (checked) {
				// 取消选中
				datalist[index].checked = false;

				// 更新已选中的优惠券 ID 列表，移除当前优惠券的 ID
				var selectedIds = that.selectedId.filter(id => id !== item.id);
				that.selectedId = selectedIds;
				// 减少选中的数量
				that.selectedCount -= 1; // 每次取消选择，数量减一
			} else {
				// 如果当前点击的复选框未选中且未超过最大选择限制
				if (selectedCount < maxSelection) {
					// 允许选中
					datalist[index].checked = true;

					// 添加当前选中的优惠券 ID 到 selectedId 数组
					that.selectedId.push(item.id);
					// 增加选中的数量
					that.selectedCount += 1; // 每次选择，数量加一
				} else {
					// 已经达到最大选择数量，提示用户
					app.error(`最多只能选择 ${maxSelection} 张优惠券`);
					return; // 提前返回，避免未选中复选框的情况
				}
			}

			// 计算是否有任何优惠券被选中
			var anySelected = datalist.some(item => item.checked);
			console.log(anySelected);

			// 如果有任何优惠券被选中，显示相关信息
			that.show = anySelected;

			// 更新选中的优惠券数量
			console.log(that.selectedCount);
		},

		toBack() {

			uni.$emit('receiveSelectedId', {
				selectedId: this.selectedId.join(','),
				selectedName: this.selectedName,
				selectedCount: this.selectedCount,
			})
			// 返回上一页
			uni.navigateBack({
				delta: 1
			});
		},
		getdata: function (loadmore) {
			if (!loadmore) {
				this.pagenum = 1;
				this.datalist = [];
			}
			var that = this;
			var pagenum = that.pagenum;
			var st = that.st;
			var bid = that.opt && (that.opt.bid || that.opt.bid === '0') ? that.opt.bid : '';
			that.loading = true;
			that.nomore = false;
			that.nodata = false;
			app.post('coupon/mycoupon', {
				st: st,
				pagenum: pagenum,
				type: 40
			}, function (res) {
				that.loading = false;
				uni.setNavigationBarTitle({
					title: '我的' + that.t('优惠券')
				});
				var data = res.data;


				if (pagenum == 1) {
					that.checkednum = 0;
					that.pics = res.pics;
					that.clist = res.clist;
					that.givecheckbox = res.givecheckbox;
					that.datalist = data;
					if (data.length == 0) {
						that.nodata = true;
					}
					that.loaded();
				} else {
					if (data.length == 0) {
						that.nomore = true;
					} else {
						var datalist = that.datalist;
						var newdata = datalist.concat(data);
						that.datalist = newdata;
					}
				}

				that.selectedId.forEach((it) => {
					let item = res.data.find(i => i.id == it)
					let index = res.data.findIndex(i => i.id == it)
					console.log(item, index);
					if (item && index != -1) {
						that.checkboxChange(item, index)
					}
				});

				// if(that.selectedId && res.data){

				// }
			});
		},
		toMovie(item) {
			const general = item.id
			app.globalData.general = general
			uni.navigateTo({
				url: '/pagesZone/movie/index'
			})
		},
		changetab: function (st) {
			this.st = st;
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
			this.getdata();
		},
		changeradio: function (e) {
			var that = this;
			var index = e.currentTarget.dataset.index;
			var datalist = that.datalist;
			var checked = datalist[index].checked;
			if (checked) {
				datalist[index].checked = false;
				that.checkednum--;
			} else {
				datalist[index].checked = true;
				that.checkednum++;
			}
			that.datalist = datalist;
			that.test = Math.random();
			console.log(that.checkednum);
			var ids = [];
			for (var i in datalist) {
				if (datalist[i].checked) {
					ids.push(datalist[i].id);
				}
			}
			ids = ids.join(',');
			that.shareTitle = '送你' + that.checkednum + '张' + that.t('优惠券');
			that.shareDesc = '点击前往查看领取';
			that.sharePic = app.globalData.initdata.logo;
			if (app.globalData.platform == 'h5' || app.globalData.platform == 'mp' || app.globalData.platform ==
				'app') {
				that.shareLink = app.globalData.pre_url + '/h5/' + app.globalData.aid +
					'.html#/pages/coupon/coupongive?scene=rids_' + ids + '-pid_' + app.globalData.mid;
			} else {
				that.shareLink = '/pages/coupon/coupongive?scene=rids_' + ids + '-pid_' + app.globalData.mid;
			}
			console.log(that.shareLink);
			that.loaded({
				title: that.shareTitle,
				pic: that.sharePic,
				desc: that.shareDesc,
				link: that.shareLink
			});
		},
		sharemp: function () {
			app.error('点击右上角发送给好友或分享到朋友圈');
			this.sharetypevisible = false
		},
		shareapp: function () {
			var that = this;
			that.sharetypevisible = false;
			uni.showActionSheet({
				itemList: ['发送给微信好友', '分享到微信朋友圈'],
				success: function (res) {
					if (res.tapIndex >= 0) {
						var scene = 'WXSceneSession';
						if (res.tapIndex == 1) {
							scene = 'WXSenceTimeline';
						}
						var sharedata = {};
						sharedata.provider = 'weixin';
						sharedata.type = 0;
						sharedata.scene = scene;
						sharedata.title = that.shareTitle;
						sharedata.summary = that.shareDesc;
						sharedata.href = that.shareLink;
						sharedata.imageUrl = that.sharePic;

						uni.share(sharedata);
					}
				}
			});
		},
	}
};
</script>
<style scoped>
.coupon-list {
	width: 100%;
	padding: 20rpx
}

.coupon {
	width: 100%;
	display: flex;
	margin-bottom: 20rpx;
	border-radius: 10rpx;
	overflow: hidden;
	align-items: center;
	position: relative;
	background: #fff;
}

.coupon .pt_left {
	background: #fff;
	min-height: 200rpx;
	color: #FFF;
	width: 30%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center
}

.coupon .pt_left-content {
	width: 100%;
	height: 100%;
	margin: 30rpx 0;
	border-right: 1px solid #EEEEEE;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center
}

.coupon .pt_left .f1 {
	font-size: 40rpx;
	font-weight: bold;
	text-align: center;
	color: #fff
}

.coupon .pt_left .t0 {
	padding-right: 0;
}

.coupon .pt_left .t1 {
	font-size: 60rpx;
}

.coupon .pt_left .t2 {
	padding-left: 10rpx;
}

.coupon .pt_left .f2 {
	font-size: 20rpx;
	color: #fff;
	text-align: center;
}

.coupon .pt_right {
	background: #fff;
	width: 70%;
	display: flex;
	min-height: 200rpx;
	text-align: left;
	padding: 20rpx 20rpx;
	position: relative;

}

.coupon .pt_right .f1 {
	flex-grow: 1;
	flex-shrink: 1;
}

.coupon .pt_right .f1 .t1 {
	font-size: 28rpx;
	color: #2B2B2B;
	font-weight: bold;
	height: 60rpx;
	line-height: 60rpx;
	overflow: hidden
}

.coupon .pt_right .f1 .t2 {
	height: 36rpx;
	line-height: 36rpx;
	font-size: 20rpx;
	font-weight: bold;
	padding: 0 16rpx;
	border-radius: 4rpx;
	margin-right: 16rpx;
}

.coupon .pt_right .f1 .t2:last-child {
	margin-right: 0;
}

.coupon .pt_right .f1 .t3 {
	font-size: 20rpx;
	color: #999999;
	height: 46rpx;
	line-height: 46rpx;
}

.coupon .pt_right .f1 .t4 {
	font-size: 20rpx;
	color: #999999;
	height: 46rpx;
	line-height: 46rpx;
}

.coupon .pt_right .btn {
	position: absolute;
	right: 30rpx;
	top: 50%;
	margin-top: -28rpx;
	border-radius: 28rpx;
	width: 160rpx;
	height: 56rpx;
	line-height: 56rpx;
	color: #fff
}

.coupon .pt_right .sygq {
	position: absolute;
	right: 30rpx;
	top: 50%;
	margin-top: -50rpx;
	width: 100rpx;
	height: 100rpx;
}

.coupon .pt_left.bg3 {
	background: #ffffff;
	color: #b9b9b9 !important
}

.coupon .pt_right.bg3 .t1 {
	color: #b9b9b9 !important
}

.coupon .pt_right.bg3 .t3 {
	color: #b9b9b9 !important
}

.coupon .pt_right.bg3 .t4 {
	color: #999999 !important
}

.coupon .radiobox {
	position: absolute;
	right: 0;
	top: 30%;
	padding: 20rpx
}

.coupon .radio {
	flex-shrink: 0;
	width: 44rpx;
	height: 44rpx;
	background: #FFFFFF;
	border: 2rpx solid #BFBFBF;
	border-radius: 50%;
}

.coupon .radio .radio-img {
	width: 100%;
	height: 100%
}

.giveopbox {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}

.btn-give {
	width: 90%;
	margin: 30rpx 5%;
	height: 96rpx;
	line-height: 96rpx;
	text-align: center;
	color: #fff;
	font-size: 30rpx;
	font-weight: bold;
	border-radius: 48rpx;
}

.show-btn {
	position: fixed;
	bottom: 100rpx;
	left: 25%;
	background-color: #ff0000;
	color: #fff;
	width: 70%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 40rpx;
}

.card {
	display: flex;
	align-items: center;
	width: 100%;


	border-radius: 8px;
	-webkit-mask-image: radial-gradient(circle at 88px 4px, transparent 4px, red 4.5px), radial-gradient(closest-side circle at 50%, red 99%, transparent 100%);
	-webkit-mask-repeat: repeat, repeat-y;
	-webkit-mask-position: 0 -8rpx, 168rpx;
	position: relative;
	margin-bottom: 20rpx;
}

.card-left {
	width: 88px;
	text-align: center;
	font-size: 18px;
	color: #fff;

}

.card-left-top {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-bottom-right-radius: 30rpx;
}

.card-right {
	padding: 16px 12px;
	display: flex;

	flex-direction: column;
}

.card-info {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: #fff;
}

.card-time {
	font-size: 12px;
	line-height: 16px;
	font-weight: normal;
	color: #fff;
	margin-top: 4px;
}

.card-right-text {
	display: flex;
	align-items: center;
	color: #fff;
}

.card-right-img {
	width: 30rpx;
	height: 30rpx;
}

.card-left-money {
	font-size: 24rpx
}

.card-btn-box {}

.card-btn {
	color: #fff;
	border-radius: 30rpx;
	padding: 10rpx 30rpx;
	font-size: 24rpx;
	text-align: center;
}

.card-btn-text {
	font-size: 24rpx;
	color: #fff;
}

.card-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex: 1;
	padding: 0 20rpx 0 0;
}

.card-item::before {
	content: '';
	position: absolute;

	top: 0;
	bottom: 0;
	width: 2px;
	border-left: 1px dashed #fff;

}

.fw-700 {
	font-weight: 700;
	font-size: 26rpx;
}

.f1 {
	font-size: 30rpx;
}

.card .radiobox {
	position: absolute;
	right: 0;
	padding: 20rpx
}

.coupon .radio {
	flex-shrink: 0;
	width: 32rpx;
	height: 32rpx;
	background: #FFFFFF;
	border: 2rpx solid #BFBFBF;
	border-radius: 50%;
}

.card .radio {
	flex-shrink: 0;
	width: 32rpx;
	height: 32rpx;
	background: #FFFFFF;
	border: 2rpx solid #BFBFBF;
	border-radius: 50%;
}

.coupon .radio .radio-img {
	width: 100%;
	height: 100%
}

.card .radio .radio-img {
	width: 100%;
	height: 100%
}
</style>